<template>
	<view class="status_bg" v-if="info._id">
		<block v-if="!info.cancel_query">
			<i class="logo a" v-if="info.status === 8">{{ statusValue }}</i>
			<i class="logo b" v-else-if="info.status === 9">{{ statusValue }}</i>
			<view class="box" v-else-if="info.status === 0">
				<i class="logo">{{ statusValue }}</i>
				<u-count-down
					format="mm分ss秒"
					:customStyle="style"
					:timestamp="timestamp"
					@end="end"
				></u-count-down>
				<text style="margin-left: 6rpx; font-size: 24rpx">后自动关闭支付</text>
			</view>
			<i class="logo" v-else>{{ statusValue }}</i>
		</block>
		<i class="logo b" v-else>申请取消中</i>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	props: {
		info: {
			type: Object,
			default() {
				return {}
			}
		},
		timestamp: {
			type: Number,
			default: 999999
		}
	},
	data() {
		return {
			statusArr: [
				"待支付",
				"待接单",
				"已接单",
				"已出发",
				"已到达",
				"服务中",
				"待确认",
				"待评价",
				"已完成",
				"已取消"
			],
			style: {
				backgroundColor: "#FF8F1E",
				borderRadius: "12rpx",
				color: "#FFFFFF",
				padding: "2rpx 8rpx"
			}
		}
	},
	computed: {
		statusValue() {
			return this.statusArr[this.info.status]
		}
	},
	methods: {
		end() {
			this.$emit("end")
		}
	}
}
</script>

<style lang="scss" scoped>
.logo {
	color: #3ab54a;
	font-size: 40rpx;
	font-weight: bold;
	display: block;
}

.a {
	color: #333;
}

.b {
	color: #999;
}

.box {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	.logo {
		flex: 1;
		font-size: 40rpx;
	}
}
</style>
